<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- v-model:数据双向绑定 -->
    用户名：<input v-model.lazy.trim="user.username" type="text"> <br>
    年龄：<input type="text" v-model.number="user.age">
    描述信息：<textarea name="" v-model="user.desc" id="" cols="30" rows="10"></textarea> <br>
    兴趣：
    <input type="checkbox" v-model="user.interset" value="1" /> 吃饭
    <input type="checkbox" v-model="user.interset" value="2" /> 睡觉
    <input type="checkbox" v-model="user.interset" value="3" /> 打豆豆
<br>
    性别：<input type="radio" v-model="user.sex" value="1"> 男 <input type="radio" v-model="user.sex" value="2"> 女
    <br>

    城市 ： 
    <select v-model="user.cities" multiple >
      <option disabled value="">请选择</option>
      <option value="1">太原</option>
      <option value="2">北京</option>
      <option value="3">上海</option>
    </select>

    <button @click="handleSubmit">提交</button>
  </div>
  <script>
    var vm = new Vue({
      data: {
       user:{
        username: "xiaoming",
        desc:"",
        age:20,
        interset:[2,3],
        sex:"1",
        cities:['2']
       }
      },
      methods: {
        handleSubmit() {
          console.log( JSON.stringify(this.user))
        }
      }
    }).$mount('#app')
  </script>
</body>

</html>